<template>
  <div class='timeLineBox'>
    <div v-for="(activity, index) in approveListData" :key="index" class='timeLineBoxBody'>
      <el-row>
        <el-col :span='6' align="right">
          <el-row>
            <div class="rightTime">{{activity.startDate.slice(0,10)}}</div>
          </el-row>
          <el-row>
            <div class="rightTime">{{activity.startDate.slice(10)}}</div>
          </el-row>
        </el-col>
        <el-col :span='18'>
          <el-row>
            <div class='circle'></div>
            <div class='lastCircle' ref='lastDot' :style="{top:lastHeight}"></div>
            <div class='personInfo' ref="fly">
              <el-row>
                <el-col>
                  <span class='personInfoTitleWord'>{{activity.activityName}}</span>
                  <span class='personInfoTitleTime'>{{activity.activityUserName}}</span>
                  <span v-show='activity.opcode==1000' class='activityOpcodeSuccess'><i class="el-icon-success"></i>
                    {{activity.opcodeName}}</span>
                  <span v-show='activity.opcode==1001' class='activityOpcodeOther'><i class="el-icon-warning"></i>
                    {{activity.opcodeName}}</span>
                  <span v-show='activity.opcode==1002' class='activityOpcodeOther'><i class="el-icon-refresh"></i>
                    {{activity.opcodeName}}</span>
                  <span v-show='activity.opcode==1003' class='activityOpcodeOther'><i class="el-icon-d-arrow-left"></i>
                    {{activity.opcodeName}}</span>
                  <span v-show='activity.opcode==1004' class='activityOpcodeOther'><i class="el-icon-edit"></i>
                    {{activity.opcodeName}}</span>
                  <span v-show='activity.opcode==1005' class='activityOpcodeOther'><i class="el-icon-d-arrow-right"></i>
                    {{activity.opcodeName}}</span>
                  <span v-show='activity.opcode==1006' class='activityOpcodeOther'><i class="el-icon-message"></i>
                    {{activity.opcodeName}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23" v-show='activity.approvalOpinion!=null'>
                  <div class='suggestDiv'>{{activity.approvalOpinion}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import {
    Tree,
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Timeline,
    TimelineItem,
    tag
  } from 'element-ui';
  export default {
    name: 'TaskWindowTime',
    components: {
      'el-tree': Tree, //树形菜单
      'el-dialog': Dialog, //对话框
      'el-tag': tag,
      'el-timeline-item': TimelineItem, //时间轴
      'el-timeline': Timeline, //时间轴
    },
    props: ['approveListData'],
    data() {
      return {
        lastHeight: '',
        dotIndex: ''
      };
    },
    mounted() {
      this.dotIndex = this.approveListData.length - 1
    },
    updated() {
      this.lastHeight = `${this.$refs.fly[this.$refs.fly.length-1].clientHeight-22}px`
      this.$refs.lastDot.top = this.lastHeight
    }
  };
</script>
<style lang="scss">
  .timeLineBox {
    padding-top: 25px;
    height: auto;

    .circle {
      height: 11px;
      width: 11px;
      border-radius: 50%;
      background: #409EFF;
      position: relative;
      left: -4px;
    }

    .timeLineBoxBody:last-child {
      .personInfo {
        margin-top: -22px;
      }

      .lastCircle {
        height: 11px;
        width: 11px;
        border-radius: 50%;
        background: #409EFF;
        position: relative;
        left: -4px;
      }
    }


    .personInfo {
      border-left: solid #EAF3F5;
      min-height: 64px;
      margin-top: -11px;
      padding-left: 20px;

      .personInfoTitleWord {
        font-size: 14px;
        font-weight: 700;
        color: #000000;
      }

      .personInfoTitleTime {
        font-size: 14px;
        padding-left: 15px
      }
    }

    .infoBox {
      margin-top: 15px;
      font-size: 12px;
      line-height: 16px;
      border: 1px solid #EAF3F5;
    }


    .rightTime {
      padding-right: 16px;
      font-size: 12px;
      color: #666666;
    }

    .suggestDiv {
      border: 1px solid #EAF3F5;
      padding: 9px 16px;
      margin-top: 12px;
      margin-bottom: 24px;
      font-size: 12px;
      color: #666666;
      word-wrap: break-word;
    }

    .activityOpcodeSuccess {
      font-size: 14px;
      color: #409EFF;
      float: right;
      padding-right: 25px
    }

    .activityOpcodeOther {
      font-size: 14px;
      color: #F56C6C;
      float: right;
      padding-right: 25px
    }

  }
</style>
